<template>
  <div>
    <TodoForm />
    <Statistics :count="todoCount" />
    <TodoList :todos="todoData" />
  </div>
</template>

<script setup>
import TodoForm from "./TodoForm.vue";
import Statistics from "./Statistics.vue";
import TodoList from "./TodoList.vue";
import { provide } from "vue";
import { useTodoList } from "./todo";

const { todoData, todoCount, addTodo, toggleTodo, removeTodo } = useTodoList();

//向子组件分发集成后的hooks方法
provide("todoMethods", {
  addTodo,
  toggleTodo,
  removeTodo,
});
</script>
